import './TodoList.css';
import TodoHeader from './TodoHeader/TodoHeader';
import TodoMain from './TodoMain/TodoMain';
import TodoFooter from './TodoFooter';
import { useEffect } from 'react';
import {useDispatch} from 'react-redux';
import { asyncGetTodos } from '../../app/slices/todoSlice';

let TodoList = () => {
	//获得 dispatch 函数
	let dispatch = useDispatch();
	//组件挂载完毕回调
	useEffect(() => { 
		dispatch(asyncGetTodos());
	}, [])

	//返回虚拟 DOM 对象 
	return <div className="todo-container">
		<div className="todo-wrap">
			<TodoHeader />
			<TodoMain />
			<TodoFooter />
		</div>
	</div>
}

//暴露
export default TodoList;